<template>
  <div>
    <el-button style="width: 100%" plain @click="checkEmployer"
      >{{$t('select_employing_company')}}</el-button
    >
    <div style="margin-top: 10px">
      <el-tag
        :key="index"
        v-for="(item, index) in checkEmployerList"
        :disable-transitions="false"
        style="margin-right: 10px"
      >
        {{ item.employerName }}
      </el-tag>
    </div>
    <!-- 选择雇主弹窗 -->
    <employerModal ref="employerModal" @setCheckData="setCheckData"></employerModal>
  </div>
</template>

<script>
import employerModal from "./employerModal";
export default {
  components: {
    employerModal,
  },
  props: {
    value: [Array,String,null],
    employerlist: [Array,String,null],
  },
  watch: {
    employerlist: {
      // 深度监听二维数组的变化，即其中任意一个元素变化都会被捕获
      handler(newValue, oldValue) {
        this.checkEmployerList = newValue;
      },
      // 开启 deep 选项
      deep: true,
      immediate: true,
    }
  },
  data() {
    return {
      checkEmployerList: [],
    };
  },
  created() {
    
  },
  methods: {
    // 选择雇主点击事件
    checkEmployer() {
      this.$refs.employerModal.setCheckList(this.checkEmployerList);
      this.$refs.employerModal.showModal();
    },
    setCheckData(list){
      this.checkEmployerList=list
      if(list.length){
        this.$emit("geteMployerList",this.checkEmployerList)
      }else{
        this.$emit("geteMployerList",[])
      }
    }
  },
};
</script>
<style scoped lang="scss">
</style>

